// import React from 'react'
// import {useStore} from '../../store'
// import {observer} from 'mobx-react-lite'

// function TodoList() {
//     const { taskStore } = useStore()
//     console.log('taskStore-todolist=',taskStore);

//     const onChange=(id)=>{
//        return taskStore.changeItem(id)
//     }
//     const onDelete=(id)=>{
//         return taskStore.deleteItem(id)
//     }
//     const allChange=(e)=>{
//         console.log('allchange=',e);
//         console.log(e.target.checked);
//         taskStore.allChange(e.target.checked)
//     }
//     return (
//         <section className='main'>
//             <input 
//                 type="checkbox" 
//                 className='toggle-all' 
//                 id="toggle-all" 
//                 onChange={allChange}
                
//             />
//             <label htmlFor="toggle-all"></label>

//             <ul className="todo-list">
//                 {
//                     taskStore.list.map(item => (
//                         <li className={`todo ${item.isDone?'completed':''}`} key={item.id}>
//                             <div className="view">
//                                 <input type="checkbox" className="toggle" checked={item.isDone} onChange={()=>onChange(item.id)}/>
//                                 <label htmlFor="toggle">{item.name}</label>
//                                 <button className="destroy" onClick={()=>onDelete(item.id)}></button>
//                             </div>
//                         </li>
//                     ))
//                 }
//                 {/* <li className="todo">
//                     <div className="view">
//                         <input type="checkbox" className="toggle" />
//                         <label htmlFor="toggle">read book</label>
//                         <button className="destroy"></button>
//                     </div>
//                 </li>
//                 <li className="todo">
//                     <div className="view">
//                         <input type="checkbox" className="toggle" />
//                         <label htmlFor="toggle">have dinner</label>
//                         <button className="destroy"></button>
//                     </div>
//                 </li>
//                 <li className="todo completed">
//                     <div className="view">
//                         <input type="checkbox" className="toggle" />
//                         <label htmlFor="toggle">have dinner</label>
//                         <button className="destroy"></button>
//                     </div>
//                 </li> */}
//             </ul>
//         </section>
//     )
// }

// export default observer(TodoList)

import React from 'react';
import { useStore } from '../../store';
import { observer } from 'mobx-react-lite'; 

const TodoList = () => {
  const { taskStore } = useStore() // React.useContext(StoreContext)
  const onChange = (id) => taskStore.checkItem(id)
  const onDel = (id) => taskStore.delItem(id)
  const allChange = (e) => {
    // console.log(e.target.checked);
    taskStore.allCheckItem(e.target.checked)
  }

  return (
    <section className='main'>
      <input 
        type="checkbox" 
        className='toggle-all' 
        id='toggle-all' 
        onChange={allChange}
        checked={taskStore.isAll}
      />
      <label htmlFor="toggle-all"></label>

      <ul className="todo-list">
        {
          taskStore.list.map(item => (
            <li className={`todo ${item.isDone ? "completed" : ""}`} key={item.id}>
              <div className="view">
                <input 
                  type="checkbox" 
                  className='toggle' 
                  checked={item.isDone}
                  onChange={() => onChange(item.id)}
                />
                <label>{item.name}</label>
                <button className='destroy' onClick={() => onDel(item.id)}></button>
              </div>
            </li>
          ))
        }
        {/* <li className="todo">
          <div className="view">
            <input type="checkbox" className='toggle' />
            <label>learn react</label>
            <button className='destroy'></button>
          </div>
        </li>
        <li className="todo">
          <div className="view">
            <input type="checkbox" className='toggle' />
            <label>learn vue</label>
            <button className='destroy'></button>
          </div>
        </li>
        <li className='todo completed'>
          <div className="view">
            <input type="checkbox" className='toggle' />
            <label>learn js</label>
            <button className='destroy'></button>
          </div>
        </li> */}
      </ul>
    </section>
  );
}

export default observer(TodoList);